<template>
  <zx-container>
    <template #zx-primary-search>
      <zx-search-form
        v-model:formData="searchParams"
        :formItems="formItems"
        v-model:page="pages.page"
        @search="searchTable"
      />
    </template>
    <template #zx-primary-header>
      <TableTitle title="团队列表">
        <el-button type="primary" icon="CirclePlus" @click="handleAdd">
          新增团队
        </el-button>
      </TableTitle>
    </template>
    <template #zx-primary-container>
      <zx-table
        ref="tableRef"
        height="100%"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        minWidth="150"
      ></zx-table>
      <zx-pagination
        v-model:page="pages.page"
        v-model:size="pages.per_page"
        :total="total"
        @change="getTableData"
      />
    </template>
  </zx-container>
  <EditDialog
    v-model:show="showEdit"
    :defaultForm="activeRow"
    :dialogType="dialogType"
    :activeOranize="activeOranize"
    @reload="reload"
  />
</template>

<script setup>
import { useTable } from 'zhixin-ui';
import { companyGroupList } from '@/api/system.js';
import {
  formItems,
  columns,
  searchParams,
  showEdit,
  activeRow,
  dialogType,
  handleAdd,
  injectData
} from './tableConst';
import TableTitle from '@/components/TableTitle';
import EditDialog from './EditDialog';
import { PAGES, INIT_ORANIZE_PARAMS } from '@/utils/const';

const props = defineProps({
  activeOranize: {
    type: Object,
    default: () => {}
  }
});
const emit = defineEmits(['roload']);

// 表格hooks
const tableRef = ref();
const { loading, tableData, pages, total, getTableData } = useTable(
  companyGroupList,
  {
    tableRef,
    searchParams,
    autorun: false,
    pages: PAGES()
  }
);

function initSearchParams() {
  pages.value.page = 1;
  INIT_ORANIZE_PARAMS(searchParams, props.activeOranize);
}
function searchTable(type) {
  if (type === 'reset') initSearchParams();
  getTableData();
}
function initTable(keep) {
  if (!keep) initSearchParams();
  getTableData();
}

// 刷新
function reload() {
  emit('roload');
}

defineExpose({ initTable });
injectData({ reload });
</script>

<style lang="scss" scoped></style>
